<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>云客信息化管理系统（公司OA系统）</title>
    <style>
        /* 全局样式 */
        body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            background-color: #f0f4f0; /* 淡绿色背景 */
            color: #333;
        }

        h1 {
            text-align: center;
            margin: 20px 0;
            color: #004d40; /* 深墨绿色标题 */
            font-size: 2.5rem;
        }

        /* Tab 容器样式 */
        .tab-container {
            text-align: center;
            margin-bottom: 20px;
            background-color: #00695c; /* 墨绿色背景 */
            padding: 10px 0;
        }

        /* Tab 样式 */
        .tab {
            display: inline-block;
            padding: 12px 25px;
            background-color: #00897b; /* 亮墨绿色 */
            color: white;
            text-decoration: none;
            cursor: pointer;
            border-radius: 5px;
            margin: 0 5px;
            transition: background-color 0.3s;
            font-weight: 600;
        }

        /* 激活状态的 Tab 样式 */
        .tab.active {
            background-color: #004d40; /* 深墨绿色 */
            color: white;
        }

        /* 鼠标悬停时的 Tab 样式 */
        .tab:hover {
            background-color: #004d40; /* 深墨绿色 */
        }

        /* 内容区域样式 */
        .tab-content {
            background-color: white;
            padding: 25px;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin: 0 20px;
            min-height: 300px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 15px;
            text-align: left;
        }

        th {
            background-color: #e0f2f1; /* 淡绿色表头 */
            color: #004d40; /* 深墨绿色表头文字 */
        }

        /* 按钮样式 */
        button {
            padding: 10px 20px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
            font-weight: 600;
        }

        /* 添加按钮样式 */
        .add-btn {
            background-color: #2e7d32; /* 深绿色添加按钮 */
            color: white;
        }

        /* 添加按钮悬停样式 */
        .add-btn:hover {
            background-color: #1b5e20; /* 更深的绿色 */
        }

        /* 编辑按钮样式 */
        .edit-btn {
            background-color: #f9a825; /* 橙色编辑按钮 */
            color: white;
        }

        /* 编辑按钮悬停样式 */
        .edit-btn:hover {
            background-color: #f57f17; /* 更深的橙色 */
        }

        /* 删除按钮样式 */
        .delete-btn {
            background-color: #d32f2f; /* 红色删除按钮 */
            color: white;
        }

        /* 删除按钮悬停样式 */
        .delete-btn:hover {
            background-color: #b71c1c; /* 更深的红色 */
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        /* 模态框内容样式 */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 25px;
            border: 1px solid #888;
            width: 35%;
            border-radius: 8px;
        }

        /* 关闭按钮样式 */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        /* 关闭按钮悬停样式 */
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h1>云客信息化管理系统（公司OA系统）</h1>
    <div class="tab-container">
        <a class="tab active" onclick="openTab(event, 'Home')">首页</a>
        <a class="tab" onclick="openTab(event, 'EmployeeManagement')">员工信息管理</a>
        <a class="tab" onclick="openTab(event, 'ProjectManagement')">项目信息管理</a>
        <a class="tab" onclick="openTab(event, 'TaskManagement')">任务信息管理</a>
        <a class="tab" onclick="openTab(event, 'LeaveManagement')">请假信息管理</a>
        <a class="tab" onclick="openTab(event, 'Statistics')">数据统计</a>
    </div>
    <div class="tab-content">
        <div id="Home" class="tab-pane">
            <h2>首页</h2>
            <p>欢迎使用云客信息化管理系统（公司OA系统），您可以通过中间导航栏选择不同的功能模块进行操作。</p>
        </div>
        <div id="EmployeeManagement" class="tab-pane" style="display: none;">
            <h2>员工信息管理</h2>
            <button class="add-btn" onclick="openAddEmployeeModal()">添加员工</button>
            <table id="employeeTable">
                <thead>
                    <tr>
                        <th>员工姓名</th>
                        <th>员工职位</th>
                        <th>员工部门</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="ProjectManagement" class="tab-pane" style="display: none;">
            <h2>项目信息管理</h2>
            <button class="add-btn" onclick="openAddProjectModal()">添加项目</button>
            <table id="projectTable">
                <thead>
                    <tr>
                        <th>项目名称</th>
                        <th>项目负责人</th>
                        <th>项目状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="TaskManagement" class="tab-pane" style="display: none;">
            <h2>任务信息管理</h2>
            <button class="add-btn" onclick="openAddTaskModal()">添加任务</button>
            <table id="taskTable">
                <thead>
                    <tr>
                        <th>任务名称</th>
                        <th>所属项目</th>
                        <th>任务负责人</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="LeaveManagement" class="tab-pane" style="display: none;">
            <h2>请假信息管理</h2>
            <button class="add-btn" onclick="openAddLeaveModal()">添加请假申请</button>
            <table id="leaveTable">
                <thead>
                    <tr>
                        <th>请假员工</th>
                        <th>请假类型</th>
                        <th>请假时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="Statistics" class="tab-pane" style="display: none;">
            <h2>数据统计</h2>
            <p>员工总数: <span id="employeeCount">0</span></p>
            <p>项目总数: <span id="projectCount">0</span></p>
            <p>任务总数: <span id="taskCount">0</span></p>
            <p>请假申请总数: <span id="leaveCount">0</span></p>
        </div>
    </div>

    <!-- 添加员工模态框 -->
    <div id="addEmployeeModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddEmployeeModal()">&times;</span>
            <h3>添加/修改员工</h3>
            <label for="employeeName">员工姓名:</label>
            <input type="text" id="employeeName" placeholder="请输入员工姓名">
            <br>
            <label for="employeePosition">员工职位:</label>
            <input type="text" id="employeePosition" placeholder="请输入员工职位">
            <br>
            <label for="employeeDepartment">员工部门:</label>
            <input type="text" id="employeeDepartment" placeholder="请输入员工部门">
            <br>
            <button onclick="saveEmployee()">保存</button>
        </div>
    </div>

    <!-- 添加项目模态框 -->
    <div id="addProjectModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddProjectModal()">&times;</span>
            <h3>添加/修改项目</h3>
            <label for="projectName">项目名称:</label>
            <input type="text" id="projectName" placeholder="请输入项目名称">
            <br>
            <label for="projectLeader">项目负责人:</label>
            <input type="text" id="projectLeader" placeholder="请输入项目负责人">
            <br>
            <label for="projectStatus">项目状态:</label>
            <input type="text" id="projectStatus" placeholder="请输入项目状态">
            <br>
            <button onclick="saveProject()">保存</button>
        </div>
    </div>

    <!-- 添加任务模态框 -->
    <div id="addTaskModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddTaskModal()">&times;</span>
            <h3>添加/修改任务</h3>
            <label for="taskName">任务名称:</label>
            <input type="text" id="taskName" placeholder="请输入任务名称">
            <br>
            <label for="taskProject">所属项目:</label>
            <input type="text" id="taskProject" placeholder="请输入所属项目">
            <br>
            <label for="taskLeader">任务负责人:</label>
            <input type="text" id="taskLeader" placeholder="请输入任务负责人">
            <br>
            <button onclick="saveTask()">保存</button>
        </div>
    </div>

    <!-- 添加请假申请模态框 -->
    <div id="addLeaveModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddLeaveModal()">&times;</span>
            <h3>添加/修改请假申请</h3>
            <label for="leaveEmployee">请假员工:</label>
            <input type="text" id="leaveEmployee" placeholder="请输入请假员工">
            <br>
            <label for="leaveType">请假类型:</label>
            <input type="text" id="leaveType" placeholder="请输入请假类型">
            <br>
            <label for="leaveTime">请假时间:</label>
            <input type="text" id="leaveTime" placeholder="请输入请假时间">
            <br>
            <button onclick="saveLeave()">保存</button>
        </div>
    </div>

    <script>
        // 初始化表格
        function initTables() {
            // 员工信息管理
            let employees = [
                { name: '张三', position: '软件工程师', department: '技术部' },
                { name: '李四', position: '测试工程师', department: '测试部' },
                { name: '王五', position: '产品经理', department: '产品部' },
                { name: '赵六', position: '设计师', department: '设计部' },
                { name: '孙七', position: '运营专员', department: '运营部' },
                { name: '周八', position: '市场专员', department: '市场部' },
                { name: '吴九', position: '客服专员', department: '客服部' },
                { name: '郑十', position: '人力资源专员', department: '人力资源部' },
                { name: '王十一', position: '财务专员', department: '财务部' },
                { name: '李十二', position: '法务专员', department: '法务部' }
            ];
            let employeeTable = document.getElementById('employeeTable').getElementsByTagName('tbody')[0];
            employeeTable.innerHTML = '';
            employees.forEach((employee, index) => {
                let row = employeeTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = employee.name;
                cell2.innerHTML = employee.position;
                cell3.innerHTML = employee.department;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditEmployeeModal(${index})">编辑</button><button class="delete-btn" onclick="deleteEmployee(${index})">删除</button>`;
            });

            // 项目信息管理
            let projects = [
                { name: '项目A', leader: '张三', status: '进行中' },
                { name: '项目B', leader: '李四', status: '已完成' },
                { name: '项目C', leader: '王五', status: '待启动' },
                { name: '项目D', leader: '赵六', status: '进行中' },
                { name: '项目E', leader: '孙七', status: '已完成' },
                { name: '项目F', leader: '周八', status: '待启动' },
                { name: '项目G', leader: '吴九', status: '进行中' },
                { name: '项目H', leader: '郑十', status: '已完成' },
                { name: '项目I', leader: '王十一', status: '待启动' },
                { name: '项目J', leader: '李十二', status: '进行中' }
            ];
            let projectTable = document.getElementById('projectTable').getElementsByTagName('tbody')[0];
            projectTable.innerHTML = '';
            projects.forEach((project, index) => {
                let row = projectTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = project.name;
                cell2.innerHTML = project.leader;
                cell3.innerHTML = project.status;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditProjectModal(${index})">编辑</button><button class="delete-btn" onclick="deleteProject(${index})">删除</button>`;
            });

            // 任务信息管理
            let tasks = [
                { name: '任务A1', project: '项目A', leader: '张三' },
                { name: '任务A2', project: '项目A', leader: '李四' },
                { name: '任务B1', project: '项目B', leader: '王五' },
                { name: '任务B2', project: '项目B', leader: '赵六' },
                { name: '任务C1', project: '项目C', leader: '孙七' },
                { name: '任务C2', project: '项目C', leader: '周八' },
                { name: '任务D1', project: '项目D', leader: '吴九' },
                { name: '任务D2', project: '项目D', leader: '郑十' },
                { name: '任务E1', project: '项目E', leader: '王十一' },
                { name: '任务E2', project: '项目E', leader: '李十二' }
            ];
            let taskTable = document.getElementById('taskTable').getElementsByTagName('tbody')[0];
            taskTable.innerHTML = '';
            tasks.forEach((task, index) => {
                let row = taskTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = task.name;
                cell2.innerHTML = task.project;
                cell3.innerHTML = task.leader;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditTaskModal(${index})">编辑</button><button class="delete-btn" onclick="deleteTask(${index})">删除</button>`;
            });

            // 请假信息管理
            let leaves = [
                { employee: '张三', type: '年假', time: '2025-03-25' },
                { employee: '李四', type: '病假', time: '2025-03-26' },
                { employee: '王五', type: '事假', time: '2025-03-27' },
                { employee: '赵六', type: '年假', time: '2025-03-28' },
                { employee: '孙七', type: '病假', time: '2025-03-29' },
                { employee: '周八', type: '事假', time: '2025-03-30' },
                { employee: '吴九', type: '年假', time: '2025-03-31' },
                { employee: '郑十', type: '病假', time: '2025-04-01' },
                { employee: '王十一', type: '事假', time: '2025-04-02' },
                { employee: '李十二', type: '年假', time: '2025-04-03' }
            ];
            let leaveTable = document.getElementById('leaveTable').getElementsByTagName('tbody')[0];
            leaveTable.innerHTML = '';
            leaves.forEach((leave, index) => {
                let row = leaveTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = leave.employee;
                cell2.innerHTML = leave.type;
                cell3.innerHTML = leave.time;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditLeaveModal(${index})">编辑</button><button class="delete-btn" onclick="deleteLeave(${index})">删除</button>`;
            });

            // 更新统计数据
            document.getElementById('employeeCount').innerHTML = employees.length;
            document.getElementById('projectCount').innerHTML = projects.length;
            document.getElementById('taskCount').innerHTML = tasks.length;
            document.getElementById('leaveCount').innerHTML = leaves.length;
        }

        // 打开 tab 页面
        function openTab(evt, tabName) {
            let i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName('tab-pane');
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = 'none';
            }
            tablinks = document.getElementsByClassName('tab');
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(' active', '');
            }
            document.getElementById(tabName).style.display = 'block';
            evt.currentTarget.className += ' active';
        }

        // 员工信息管理
        let currentEmployeeIndex = null;

        function openAddEmployeeModal() {
            currentEmployeeIndex = null;
            document.getElementById('employeeName').value = '';
            document.getElementById('employeePosition').value = '';
            document.getElementById('employeeDepartment').value = '';
            document.getElementById('addEmployeeModal').style.display = 'block';
        }

        function openEditEmployeeModal(index) {
            currentEmployeeIndex = index;
            let employees = [
                { name: '张三', position: '软件工程师', department: '技术部' },
                { name: '李四', position: '测试工程师', department: '测试部' },
                { name: '王五', position: '产品经理', department: '产品部' },
                { name: '赵六', position: '设计师', department: '设计部' },
                { name: '孙七', position: '运营专员', department: '运营部' },
                { name: '周八', position: '市场专员', department: '市场部' },
                { name: '吴九', position: '客服专员', department: '客服部' },
                { name: '郑十', position: '人力资源专员', department: '人力资源部' },
                { name: '王十一', position: '财务专员', department: '财务部' },
                { name: '李十二', position: '法务专员', department: '法务部' }
            ];
            let employee = employees[index];
            document.getElementById('employeeName').value = employee.name;
            document.getElementById('employeePosition').value = employee.position;
            document.getElementById('employeeDepartment').value = employee.department;
            document.getElementById('addEmployeeModal').style.display = 'block';
        }

        function closeAddEmployeeModal() {
            document.getElementById('addEmployeeModal').style.display = 'none';
        }

        function saveEmployee() {
            let employees = [
                { name: '张三', position: '软件工程师', department: '技术部' },
                { name: '李四', position: '测试工程师', department: '测试部' },
                { name: '王五', position: '产品经理', department: '产品部' },
                { name: '赵六', position: '设计师', department: '设计部' },
                { name: '孙七', position: '运营专员', department: '运营部' },
                { name: '周八', position: '市场专员', department: '市场部' },
                { name: '吴九', position: '客服专员', department: '客服部' },
                { name: '郑十', position: '人力资源专员', department: '人力资源部' },
                { name: '王十一', position: '财务专员', department: '财务部' },
                { name: '李十二', position: '法务专员', department: '法务部' }
            ];
            let name = document.getElementById('employeeName').value;
            let position = document.getElementById('employeePosition').value;
            let department = document.getElementById('employeeDepartment').value;
            if (name && position && department) {
                if (currentEmployeeIndex!== null) {
                    employees[currentEmployeeIndex] = { name, position, department };
                } else {
                    employees.push({ name, position, department });
                }
                let employeeTable = document.getElementById('employeeTable').getElementsByTagName('tbody')[0];
                employeeTable.innerHTML = '';
                employees.forEach((employee, index) => {
                    let row = employeeTable.insertRow();
                    let cell1 = row.insertCell(0);
                    let cell2 = row.insertCell(1);
                    let cell3 = row.insertCell(2);
                    let cell4 = row.insertCell(3);
                    cell1.innerHTML = employee.name;
                    cell2.innerHTML = employee.position;
                    cell3.innerHTML = employee.department;
                    cell4.innerHTML = `<button class="edit-btn" onclick="openEditEmployeeModal(${index})">编辑</button><button class="delete-btn" onclick="deleteEmployee(${index})">删除</button>`;
                });
                closeAddEmployeeModal();
                document.getElementById('employeeCount').innerHTML = employees.length;
            }
        }

        function deleteEmployee(index) {
            let employees = [
                { name: '张三', position: '软件工程师', department: '技术部' },
                { name: '李四', position: '测试工程师', department: '测试部' },
                { name: '王五', position: '产品经理', department: '产品部' },
                { name: '赵六', position: '设计师', department: '设计部' },
                { name: '孙七', position: '运营专员', department: '运营部' },
                { name: '周八', position: '市场专员', department: '市场部' },
                { name: '吴九', position: '客服专员', department: '客服部' },
                { name: '郑十', position: '人力资源专员', department: '人力资源部' },
                { name: '王十一', position: '财务专员', department: '财务部' },
                { name: '李十二', position: '法务专员', department: '法务部' }
            ];
            employees.splice(index, 1);
            let employeeTable = document.getElementById('employeeTable').getElementsByTagName('tbody')[0];
            employeeTable.innerHTML = '';
            employees.forEach((employee, index) => {
                let row = employeeTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = employee.name;
                cell2.innerHTML = employee.position;
                cell3.innerHTML = employee.department;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditEmployeeModal(${index})">编辑</button><button class="delete-btn" onclick="deleteEmployee(${index})">删除</button>`;
            });
            document.getElementById('employeeCount').innerHTML = employees.length;
        }

        // 项目信息管理
        let currentProjectIndex = null;

        function openAddProjectModal() {
            currentProjectIndex = null;
            document.getElementById('projectName').value = '';
            document.getElementById('projectLeader').value = '';
            document.getElementById('projectStatus').value = '';
            document.getElementById('addProjectModal').style.display = 'block';
        }

        function openEditProjectModal(index) {
            currentProjectIndex = index;
            let projects = [
                { name: '项目A', leader: '张三', status: '进行中' },
                { name: '项目B', leader: '李四', status: '已完成' },
                { name: '项目C', leader: '王五', status: '待启动' },
                { name: '项目D', leader: '赵六', status: '进行中' },
                { name: '项目E', leader: '孙七', status: '已完成' },
                { name: '项目F', leader: '周八', status: '待启动' },
                { name: '项目G', leader: '吴九', status: '进行中' },
                { name: '项目H', leader: '郑十', status: '已完成' },
                { name: '项目I', leader: '王十一', status: '待启动' },
                { name: '项目J', leader: '李十二', status: '进行中' }
            ];
            let project = projects[index];
            document.getElementById('projectName').value = project.name;
            document.getElementById('projectLeader').value = project.leader;
            document.getElementById('projectStatus').value = project.status;
            document.getElementById('addProjectModal').style.display = 'block';
        }

        function closeAddProjectModal() {
            document.getElementById('addProjectModal').style.display = 'none';
        }

        function saveProject() {
            let projects = [
                { name: '项目A', leader: '张三', status: '进行中' },
                { name: '项目B', leader: '李四', status: '已完成' },
                { name: '项目C', leader: '王五', status: '待启动' },
                { name: '项目D', leader: '赵六', status: '进行中' },
                { name: '项目E', leader: '孙七', status: '已完成' },
                { name: '项目F', leader: '周八', status: '待启动' },
                { name: '项目G', leader: '吴九', status: '进行中' },
                { name: '项目H', leader: '郑十', status: '已完成' },
                { name: '项目I', leader: '王十一', status: '待启动' },
                { name: '项目J', leader: '李十二', status: '进行中' }
            ];
            let name = document.getElementById('projectName').value;
            let leader = document.getElementById('projectLeader').value;
            let status = document.getElementById('projectStatus').value;
            if (name && leader && status) {
                if (currentProjectIndex!== null) {
                    projects[currentProjectIndex] = { name, leader, status };
                } else {
                    projects.push({ name, leader, status });
                }
                let projectTable = document.getElementById('projectTable').getElementsByTagName('tbody')[0];
                projectTable.innerHTML = '';
                projects.forEach((project, index) => {
                    let row = projectTable.insertRow();
                    let cell1 = row.insertCell(0);
                    let cell2 = row.insertCell(1);
                    let cell3 = row.insertCell(2);
                    let cell4 = row.insertCell(3);
                    cell1.innerHTML = project.name;
                    cell2.innerHTML = project.leader;
                    cell3.innerHTML = project.status;
                    cell4.innerHTML = `<button class="edit-btn" onclick="openEditProjectModal(${index})">编辑</button><button class="delete-btn" onclick="deleteProject(${index})">删除</button>`;
                });
                closeAddProjectModal();
                document.getElementById('projectCount').innerHTML = projects.length;
            }
        }

        function deleteProject(index) {
            let projects = [
                { name: '项目A', leader: '张三', status: '进行中' },
                { name: '项目B', leader: '李四', status: '已完成' },
                { name: '项目C', leader: '王五', status: '待启动' },
                { name: '项目D', leader: '赵六', status: '进行中' },
                { name: '项目E', leader: '孙七', status: '已完成' },
                { name: '项目F', leader: '周八', status: '待启动' },
                { name: '项目G', leader: '吴九', status: '进行中' },
                { name: '项目H', leader: '郑十', status: '已完成' },
                { name: '项目I', leader: '王十一', status: '待启动' },
                { name: '项目J', leader: '李十二', status: '进行中' }
            ];
            projects.splice(index, 1);
            let projectTable = document.getElementById('projectTable').getElementsByTagName('tbody')[0];
            projectTable.innerHTML = '';
            projects.forEach((project, index) => {
                let row = projectTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = project.name;
                cell2.innerHTML = project.leader;
                cell3.innerHTML = project.status;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditProjectModal(${index})">编辑</button><button class="delete-btn" onclick="deleteProject(${index})">删除</button>`;
            });
            document.getElementById('projectCount').innerHTML = projects.length;
        }

        // 任务信息管理
        let currentTaskIndex = null;

        function openAddTaskModal() {
            currentTaskIndex = null;
            document.getElementById('taskName').value = '';
            document.getElementById('taskProject').value = '';
            document.getElementById('taskLeader').value = '';
            document.getElementById('addTaskModal').style.display = 'block';
        }

        function openEditTaskModal(index) {
            currentTaskIndex = index;
            let tasks = [
                { name: '任务A1', project: '项目A', leader: '张三' },
                { name: '任务A2', project: '项目A', leader: '李四' },
                { name: '任务B1', project: '项目B', leader: '王五' },
                { name: '任务B2', project: '项目B', leader: '赵六' },
                { name: '任务C1', project: '项目C', leader: '孙七' },
                { name: '任务C2', project: '项目C', leader: '周八' },
                { name: '任务D1', project: '项目D', leader: '吴九' },
                { name: '任务D2', project: '项目D', leader: '郑十' },
                { name: '任务E1', project: '项目E', leader: '王十一' },
                { name: '任务E2', project: '项目E', leader: '李十二' }
            ];
            let task = tasks[index];
            document.getElementById('taskName').value = task.name;
            document.getElementById('taskProject').value = task.project;
            document.getElementById('taskLeader').value = task.leader;
            document.getElementById('addTaskModal').style.display = 'block';
        }

        function closeAddTaskModal() {
            document.getElementById('addTaskModal').style.display = 'none';
        }

        function saveTask() {
            let tasks = [
                { name: '任务A1', project: '项目A', leader: '张三' },
                { name: '任务A2', project: '项目A', leader: '李四' },
                { name: '任务B1', project: '项目B', leader: '王五' },
                { name: '任务B2', project: '项目B', leader: '赵六' },
                { name: '任务C1', project: '项目C', leader: '孙七' },
                { name: '任务C2', project: '项目C', leader: '周八' },
                { name: '任务D1', project: '项目D', leader: '吴九' },
                { name: '任务D2', project: '项目D', leader: '郑十' },
                { name: '任务E1', project: '项目E', leader: '王十一' },
                { name: '任务E2', project: '项目E', leader: '李十二' }
            ];
            let name = document.getElementById('taskName').value;
            let project = document.getElementById('taskProject').value;
            let leader = document.getElementById('taskLeader').value;
            if (name && project && leader) {
                if (currentTaskIndex!== null) {
                    tasks[currentTaskIndex] = { name, project, leader };
                } else {
                    tasks.push({ name, project, leader });
                }
                let taskTable = document.getElementById('taskTable').getElementsByTagName('tbody')[0];
                taskTable.innerHTML = '';
                tasks.forEach((task, index) => {
                    let row = taskTable.insertRow();
                    let cell1 = row.insertCell(0);
                    let cell2 = row.insertCell(1);
                    let cell3 = row.insertCell(2);
                    let cell4 = row.insertCell(3);
                    cell1.innerHTML = task.name;
                    cell2.innerHTML = task.project;
                    cell3.innerHTML = task.leader;
                    cell4.innerHTML = `<button class="edit-btn" onclick="openEditTaskModal(${index})">编辑</button><button class="delete-btn" onclick="deleteTask(${index})">删除</button>`;
                });
                closeAddTaskModal();
                document.getElementById('taskCount').innerHTML = tasks.length;
            }
        }

        function deleteTask(index) {
            let tasks = [
                { name: '任务A1', project: '项目A', leader: '张三' },
                { name: '任务A2', project: '项目A', leader: '李四' },
                { name: '任务B1', project: '项目B', leader: '王五' },
                { name: '任务B2', project: '项目B', leader: '赵六' },
                { name: '任务C1', project: '项目C', leader: '孙七' },
                { name: '任务C2', project: '项目C', leader: '周八' },
                { name: '任务D1', project: '项目D', leader: '吴九' },
                { name: '任务D2', project: '项目D', leader: '郑十' },
                { name: '任务E1', project: '项目E', leader: '王十一' },
                { name: '任务E2', project: '项目E', leader: '李十二' }
            ];
            tasks.splice(index, 1);
            let taskTable = document.getElementById('taskTable').getElementsByTagName('tbody')[0];
            taskTable.innerHTML = '';
            tasks.forEach((task, index) => {
                let row = taskTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = task.name;
                cell2.innerHTML = task.project;
                cell3.innerHTML = task.leader;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditTaskModal(${index})">编辑</button><button class="delete-btn" onclick="deleteTask(${index})">删除</button>`;
            });
            document.getElementById('taskCount').innerHTML = tasks.length;
        }

        // 请假信息管理
        let currentLeaveIndex = null;

        function openAddLeaveModal() {
            currentLeaveIndex = null;
            document.getElementById('leaveEmployee').value = '';
            document.getElementById('leaveType').value = '';
            document.getElementById('leaveTime').value = '';
            document.getElementById('addLeaveModal').style.display = 'block';
        }

        function openEditLeaveModal(index) {
            currentLeaveIndex = index;
            let leaves = [
                { employee: '张三', type: '年假', time: '2025-03-25' },
                { employee: '李四', type: '病假', time: '2025-03-26' },
                { employee: '王五', type: '事假', time: '2025-03-27' },
                { employee: '赵六', type: '年假', time: '2025-03-28' },
                { employee: '孙七', type: '病假', time: '2025-03-29' },
                { employee: '周八', type: '事假', time: '2025-03-30' },
                { employee: '吴九', type: '年假', time: '2025-03-31' },
                { employee: '郑十', type: '病假', time: '2025-04-01' },
                { employee: '王十一', type: '事假', time: '2025-04-02' },
                { employee: '李十二', type: '年假', time: '2025-04-03' }
            ];
            let leave = leaves[index];
            document.getElementById('leaveEmployee').value = leave.employee;
            document.getElementById('leaveType').value = leave.type;
            document.getElementById('leaveTime').value = leave.time;
            document.getElementById('addLeaveModal').style.display = 'block';
        }

        function closeAddLeaveModal() {
            document.getElementById('addLeaveModal').style.display = 'none';
        }

        function saveLeave() {
            let leaves = [
                { employee: '张三', type: '年假', time: '2025-03-25' },
                { employee: '李四', type: '病假', time: '2025-03-26' },
                { employee: '王五', type: '事假', time: '2025-03-27' },
                { employee: '赵六', type: '年假', time: '2025-03-28' },
                { employee: '孙七', type: '病假', time: '2025-03-29' },
                { employee: '周八', type: '事假', time: '2025-03-30' },
                { employee: '吴九', type: '年假', time: '2025-03-31' },
                { employee: '郑十', type: '病假', time: '2025-04-01' },
                { employee: '王十一', type: '事假', time: '2025-04-02' },
                { employee: '李十二', type: '年假', time: '2025-04-03' }
            ];
            let employee = document.getElementById('leaveEmployee').value;
            let type = document.getElementById('leaveType').value;
            let time = document.getElementById('leaveTime').value;
            if (employee && type && time) {
                if (currentLeaveIndex!== null) {
                    leaves[currentLeaveIndex] = { employee, type, time };
                } else {
                    leaves.push({ employee, type, time });
                }
                let leaveTable = document.getElementById('leaveTable').getElementsByTagName('tbody')[0];
                leaveTable.innerHTML = '';
                leaves.forEach((leave, index) => {
                    let row = leaveTable.insertRow();
                    let cell1 = row.insertCell(0);
                    let cell2 = row.insertCell(1);
                    let cell3 = row.insertCell(2);
                    let cell4 = row.insertCell(3);
                    cell1.innerHTML = leave.employee;
                    cell2.innerHTML = leave.type;
                    cell3.innerHTML = leave.time;
                    cell4.innerHTML = `<button class="edit-btn" onclick="openEditLeaveModal(${index})">编辑</button><button class="delete-btn" onclick="deleteLeave(${index})">删除</button>`;
                });
                closeAddLeaveModal();
                document.getElementById('leaveCount').innerHTML = leaves.length;
            }
        }

        function deleteLeave(index) {
            let leaves = [
                { employee: '张三', type: '年假', time: '2025-03-25' },
                { employee: '李四', type: '病假', time: '2025-03-26' },
                { employee: '王五', type: '事假', time: '2025-03-27' },
                { employee: '赵六', type: '年假', time: '2025-03-28' },
                { employee: '孙七', type: '病假', time: '2025-03-29' },
                { employee: '周八', type: '事假', time: '2025-03-30' },
                { employee: '吴九', type: '年假', time: '2025-03-31' },
                { employee: '郑十', type: '病假', time: '2025-04-01' },
                { employee: '王十一', type: '事假', time: '2025-04-02' },
                { employee: '李十二', type: '年假', time: '2025-04-03' }
            ];
            leaves.splice(index, 1);
            let leaveTable = document.getElementById('leaveTable').getElementsByTagName('tbody')[0];
            leaveTable.innerHTML = '';
            leaves.forEach((leave, index) => {
                let row = leaveTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = leave.employee;
                cell2.innerHTML = leave.type;
                cell3.innerHTML = leave.time;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditLeaveModal(${index})">编辑</button><button class="delete-btn" onclick="deleteLeave(${index})">删除</button>`;
            });
            document.getElementById('leaveCount').innerHTML = leaves.length;
        }

        // 页面加载完成后初始化表格
        window.onload = function () {
            initTables();
        };
    </script>
</body>

</html>